<div class="consoleHeader">
  <div class="consoleFiltering">
    <button [ngClass]="{ lightTheme: isLightThemeEnabled }" class="filterButton" [matMenuTriggerFor]="filterMenu">
      Apply filter
    </button>
    <mat-menu #filterMenu="matMenu" xPosition="after">
      <button (click)="applyFilter('all')" mat-menu-item>all</button>
      <button (click)="applyFilter('errors')" mat-menu-item>errors</button>
      <button (click)="applyFilter('warnings')" mat-menu-item>warnings</button>
      <button (click)="applyFilter('info')" mat-menu-item>info</button>
      <button (click)="applyFilter('map updates')" mat-menu-item>map updates</button>
      <button (click)="applyFilter('server requests')" mat-menu-item>server requests</button>
    </mat-menu>
  </div>
</div>

<div [ngClass]="{ lightTheme: isLightThemeEnabled }" #console class="console" [ngStyle]="style">
  <span class="console-item" *ngFor="let event of filteredEvents"> {{ event.message }} <br /> </span>
</div>

<div [ngClass]="{ lightTheme: isLightThemeEnabled }" class="consoleInput">
  <mat-icon class="inputIcon">keyboard_arrow_right</mat-icon>
  <input
    [ngClass]="{ lightTheme: isLightThemeEnabled }"
    class="commandLine"
    autofocus
    (keydown)="onKeyDown($event)"
    type="text"
    [(ngModel)]="command"
  />
</div>
